<template>
  <div>
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">

        <template slot-scope="scope">
            <!-- scope.row 本条数据 这样时作用域插槽 scope时插槽的返回数据 -->
            <el-tag size="medium" style="color:red">{{ scope.row.name }}</el-tag>
        </template>

      </el-table-column>
      <el-table-column prop="sex" label="性别">
          <template slot-scope="scope">
           <span v-if="scope.row.sex == '0'">男</span>
           <span v-if="scope.row.sex == '1'">女</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
      
    </el-table>
  </div>
</template>

<script>
export default {
    data() {
        return {
          tableData: [
            {
            date: '2016-05-02',
            sex:'0',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, 
          {
            date: '2016-05-04',
            sex:'0',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, 
          {
            date: '2016-05-01',
            sex:'1',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, 
          {
            date: '2016-05-03',
            sex:'1',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
          ]
        }
      },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
        
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.tableData.splice(index,1);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
}
</script>

<style>

</style>